<template>
  <view class="listBox">
    <view class="tagsBox flr w100p">
      <text v-for="(item, index) in tagList" :key="item" class="tagItem" :class="{ activeTag: index === tagIdx }" @click.stop="tagItemClick(index)">{{ item }}</text>
    </view>
    <scroll-view scroll-y @scrolltolower="getListData" class="scrollList">
      <view v-for="(item, index) in itemList" :key="item.id" class="itemBox flc" :class="{ noTop: index === 0 }" @click="jumpToPage(item)">
        <view class="flb ell2 f14">{{ item.obj.title || item.obj.detailInfo }}</view>
        <view class="demandTagBox flw" v-if="tagIdx < 2">
          <view v-for="(label, key) in item.obj.labels.split(',').filter(el => el) || []" :key="key" :class="key < 2 ? 'orangeTag' : 'grayTag'">
            {{ label }}
          </view>
        </view>
        <view class="flca flb h32">
          <view class="h32 l32 f12">{{ item.collectTime }}</view>
          <view class="h32 flca flr">
            <view class="blueBtn h24 f12 cWH mr6" @click="cancelCollectClick(item)">取消收藏</view>
            <view class="orangeBtn h24 f12 cWH" @click.stop="callPhone(item)">点击联系</view>
          </view>
        </view>
      </view>
      <view class="noData" v-if="itemList.length === 0">
        <view class="noDataImgBox flca">
          <image class="nodataImg" src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/9b45410e958a47c68d56e64cc27fbc29e.jfif" mode="scaleToFill" />
        </view>
        <view class="noRecord">暂无记录</view>
      </view>
    </scroll-view>
    <call-tips ref="callTips" @openEvaluated="openEvaluated" />
    <uni-popup ref="evaluatedPopup" class="evaluated-popup" type="bottom" :is-mask-click="false" background-color="#fff" border-radius="20rem 20rem 0 0">
      <to-be-evaluated :targetIdInfo="targetIdInfo" :showType="tagIdx + 1" @closePopup="closePopup" />
    </uni-popup>
  </view>
</template>
<script>
import CallTips from '@/component/call-phone-tips/index.vue';
import ToBeEvaluated from '@/component/ToBeEvaluated.vue';
const api = require('@/utils/request.js');
export default {
  components: { CallTips, ToBeEvaluated },
  props: {
    tagIndex: {
      type: Number,
      default: () => 0
    }
  },
  watch: {
    tagIndex(val) {
      this.tagIdx = val;
    }
  },
  data() {
    return {
      tagIdx: 0,
      pageSize: 20,
      pageNum: 1,
      timestampFlag: '',
      itemList: [],
      // tagList: ['采购需求', '销售需求', '企业信息'],
      tagList: ['采购需求', '销售需求'],
      curItem: {},
      targetIdInfo: { targetId: '', startTime: '', releaseTime: '' }
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    // 关闭评价弹窗
    closePopup() {
      this.$refs.popup.close();
    },
    // 打开评价弹窗
    openEvaluated(targetIdInfo) {
      this.targetIdInfo = targetIdInfo;
      this.$refs.popup.open('bottom');
    },
    async getListData() {
      let timestampFlag = 0; //第一次查询的是0
      let len = this.itemList.length;
      if (len > 0) {
        timestampFlag = this.itemList[len - 1].timestampFlag;
      }
      //这边为了防止丢数据(同一时间点N多人同时发)/查重复数据(刷新前有人发了新动态)，用timeStampFlag字段对动态进行排序，后端会对统一毫秒发的动态再加1毫秒，保证没有在同一时间有不同的人发动态
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
        timestampFlag,
        collectType: String(this.tagIdx + 1)
      };
      if (data.timestampFlag === 0) {
        delete data.timestampFlag;
      }
      let res = await api.request({ url: '/appUser/queryMyCollectList', data, method: 'GET' });
      this.itemList = [...this.itemList, ...res.data];
      if (res.data.length === 0) {
        uni.showToast({ title: '没有数据啦~~', icon: 'none' });
      }
    },
    jumpToPage(item) {},
    async cancelCollectClick(item) {
      let data = {};
      let url;
      if (item.collectType === '1') {
        url = '/purchaseInfo/cancelCollect';
        data.purchaseInfoId = item.obj.id;
      } else if (item.collectType === '2') {
        url = '/saleInfo/cancelCollect';
        data.saleInfoId = item.obj.id;
      }
      await api.request({ url, data, method: 'GET' });
      uni.showToast({ title: '取消收藏成功', icon: 'success' });
      this.pageNum = 1;
      this.itemList = [];
      this.getListData();
    },
    tagItemClick(index) {
      this.tagIdx = index;
      this.pageNum = 1;
      this.itemList = [];
      this.getListData();
    },
    callPhone(item) {
      if (!this.globalData.userInfo.obj.phoneNumber) {
        uni.navigateTo({ url: '/pages/global/authorizePhone' });
      } else {
        this.$refs.callTips.open(String(item.obj.id), item.contactType === '1' ? 1 : 2);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.listBox {
  height: calc(100% - 72rem);
  padding: 4rem 12rem 12rem 12rem;
  box-sizing: border-box;
  border-top: 1rem solid #ff7c00;
  border-top-left-radius: 20rem;
  border-top-right-radius: 20rem;
  .tagsBox {
    padding-top: 12rem;
    box-sizing: border-box;
    height: 44rem;
    .tagItem {
      height: 32rem;
      border-radius: 5rem;
      box-sizing: border-box;
      line-height: 32rem;
      font-size: 16rem;
      color: #a6a6a6;
      margin-right: 16rem;
      &.activeTag {
        color: #383838;
        font-weight: 700;
      }
    }
  }
  .scrollList {
    height: calc(100% - 44rem);
    .itemBox {
      margin-top: 8rem;
      border-radius: 10rem;
      background: rgba(255, 251, 247, 1);
      padding: 12rem;
      box-sizing: border-box;
      .btn1 {
        padding: 6rem 10rem;
        box-sizing: border-box;
        background: #ffc300;
        line-height: 12rem;
        border-radius: 3rem;
      }
      .btn2 {
        padding: 6rem 10rem;
        box-sizing: border-box;
        background: #2a82e4;
        line-height: 12rem;
        border-radius: 3rem;
      }
      .blueBtn {
        padding: 6rem 10rem;
        box-sizing: border-box;
        background: #b6e0c7;
        color: #1a7840;
        line-height: 12rem;
        border-radius: 3rem;
      }
      .orangeBtn {
        padding: 6rem 10rem;
        box-sizing: border-box;
        background: rgba(252, 234, 215, 1) !important;
        color: rgba(255, 124, 0, 1) !important;
        line-height: 12rem;
        border-radius: 3rem;
      }
      .demandTagBox {
        padding: 5rem 0;
        box-sizing: border-box;
      }
      .orangeTag,
      .grayTag {
        margin-top: 5rem;
        font-size: 12rem;
        height: 22rem;
        line-height: 22rem;
        padding: 0 6rem;
        box-sizing: border-box;
        border-radius: 3rem;
        margin: 0 4rem 4rem 0;
      }
      .orangeTag {
        font-weight: 700;
        color: rgba(255, 118, 17, 1);
        background-color: rgba(252, 234, 215, 1);
      }
      .grayTag {
        color: #383838;
        background-color: rgba(187, 217, 250, 1);
      }
    }
    .noTop {
      margin-top: 0;
    }
  }
}
.popMain {
  left: 105px;
  top: 312px;
  width: 226px;
  height: 158px;
  opacity: 1;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe3c7 0%, #ffffff 37.78%);
  box-shadow: 0px 1px 3px #000000;
  .rightClose {
    position: absolute;
    right: 12rem;
    top: 9rem;
  }
  .phoneBox {
    padding: 0 12rem;
    box-sizing: border-box;
    .lb1 {
      height: 48rem;
      line-height: 48rem;
      border-bottom: 1px solid #dbdbdb;
    }
    .lb2 {
      height: 65rem;
      line-height: 65rem;
    }
    .lb3 {
      padding: 0 12rem;
      box-sizing: border-box;
      .btn6 {
        height: 30rem;
        border-radius: 20rem;
        text-align: center;
        width: 80rem;
        border: 1px solid #ff7c00;
        line-height: 30rem;
      }
      .btn7 {
        height: 30rem;
        border-radius: 20rem;
        text-align: center;
        width: 80rem;
        line-height: 30rem;
      }
    }
  }
}
</style>
